<script setup>
import { onMounted, ref, computed } from 'vue'
import {
  getData,
  delData,
  getDepartment,
  getDepartmentDeatil,
  editDepartment,
  addDepartment,
  getSort
} from '@/api/departmentControl.js'
import { ElMessage } from 'element-plus'
const datalist = ref({
  page: 1,
  size: 10,
  total: null,
  currentPage: null,
  deptName: '',
  status: null
})
const tableList = ref([{}])
onMounted(() => {
  getDataAPI()
})
// 获取基础数据
const getDataAPI = async () => {
  // const { data, size, total, currentPage } = await getData(datalist.value)
  // tableList.value = data
  // datalist.value.size= size
  // datalist.value.total= total
  // datalist.value.currentPage=currentPage
  const res = await getData(datalist.value)
  tableList.value = res.data
  datalist.value.total = res.total
  console.log(res)
}
// 搜索事件
const search = () => {
  datalist.value.page = 1
  getDataAPI()
}
// 编辑
const edit = async (id) => {
  const res = await getDepartmentDeatil(id)
  console.log(res)
  addForm.value = res.data
  getDepartmentAPI()
  getSortAPI()
  isShowDialog.value = true
}
// 弹层组件的名称
const showTitle = computed(() => {
  return addForm.value.id ? '修改部门' : '添加部门'
})
// 弹层取消
const cancelBtn = () => {
  isShowDialog.value = false
  addForm.value = {}
}
// 弹层确认
const dialogList = ref(null)
const BtnOK = async () => {
  await dialogList.value.validate()
  if (addForm.value.id) {
    // 编辑
    await editDepartment(addForm.value)
    console.log(addForm.value)
    ElMessage.success('部门修改成功')
  } else {
    // 新增
    await addDepartment(addForm.value)
    ElMessage.success('部门添加成功')
  }
  cancelBtn()
  getDataAPI()
}
// 新增
const isShowDialog = ref(false)
const add = () => {
  getDepartmentAPI()
  getSortAPI()
  isShowDialog.value = true
}
// 删除
const confirmEvent = async (id) => {
  // console.log('confirm!')
  await delData(id)
  ElMessage.success('删除成功')
  // 重新获取数据列表
  getDataAPI()
}

// 表单校验
const rules = {
  superiorName: [{ required: true, message: '请选择上级部门', trigger: 'blur' }],
  deptName: [{ required: true, message: '请输入部门名称', trigger: 'blur' }],
  sort: [{ required: true, message: '请输入部门名称', trigger: 'blur' }]
}
// 获取所有部门名称
const departmentList = ref([])
const getDepartmentAPI = async () => {
  const res = await getDepartment()
  console.log(res)
  departmentList.value = res.data
}
// 获取排序
const sortList = ref([])
const getSortAPI=async()=>{
const res =await getSort()
console.log(res)
sortList.value=res.data
}
const addForm = ref({
  superiorName: '',
  deptName: '',
  sort: null,
  status: null
})
</script>

<template>
  <div class="container">
    <!-- 搜索输入 -->
    <div class="navTop">
      <el-form label-width="100px" :model="datalist">
        <el-row :gutter="24" style="padding-top: 10px">
          <el-col :span="10">
            <el-form-item label="部门名称">
              <el-input
                placeholder="请输入部门名称"
                size="large"
                v-model="datalist.deptName"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="部门状态:">
              <el-select placeholder="请选择部门状态" size="large" v-model="datalist.status">
                <el-option value="1">启用</el-option>
                <el-option value="0">禁用</el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button
              type="primary"
              round
              size="large"
              style="background-color: #05cc95; margin-top: 29px; width: 100px"
              @click="search"
              >搜索</el-button
            >
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 表格区域 -->
    <div class="content">
      <div class="choice"></div>
      <div class="body">
        <el-button type="primary" round size="large" class="add" @click="add">新增部门</el-button>
        <el-table style="width: 100%" :data="tableList" :default-sort="{ prop: 'sort', order: 'descending' }">
          <el-table-column
            align="center"
            label="上级部门名称"
            prop="superiorName"
          ></el-table-column>
          <el-table-column align="center" label="部门名称" prop="deptName"></el-table-column>
          <el-table-column align="center" label="排序" sortable prop="sort"></el-table-column>
          <el-table-column align="center" label="状态" prop="status">
            <span>{{ status === 1 ? '启用' : '禁用' }}</span>
          </el-table-column>
          <el-table-column align="center" label="创建时间" prop="createTime"></el-table-column>
          <el-table-column align="center" label="操作">
            <template v-slot="{ row }">
              <el-button type="text" @click="edit(row.id)">修改</el-button>
              <el-popconfirm
                width="220"
                confirm-button-text="确认"
                cancel-button-text="取消"
                :icon="InfoFilled"
                icon-color="#626AEF"
                title="确定要删除吗？"
                @confirm="confirmEvent(row.id)"
                @cancel="cancelEvent"
              >
                <template #reference>
                  <el-button type="text">删除</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="end">
          <el-pagination
            :page-size="[10, 20, 30, 40]"
            :small="small"
            :background="primary"
            layout="total,prev,pager,next,sizes,jumper"
            :total="datalist.total"
          >
          </el-pagination>
        </el-row>
      </div>
    </div>
    <!-- 弹层组件 -->
    <el-dialog :title="showTitle" v-model="isShowDialog">
      <el-form
        label-width="120px"
        :label-position="right"
        :model="addForm"
        :rules="rules"
        ref="dialogList"
      >
        <el-form-item label="上级部门：" prop="superiorName">
          <el-select placeholder="请选择" v-model="addForm.superiorName">
            <el-option v-for="item in departmentList" :key="item.id" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部门名称：" prop="deptName">
          <el-input placeholder="请输入" v-model="addForm.deptName"> </el-input>
        </el-form-item>
        <el-form-item label="排序：" prop="sort">
          <el-select placeholder="请选择" v-model="addForm.sort">
            <el-option v-for="item in sortList" :key="item.id" :value="item"></el-option>
          
          </el-select>
        </el-form-item>
        <el-form-item label="状态：" v-model="addForm.status">
          <el-radio label="1" style="margin-left: 25px">正常</el-radio>
          <el-radio label="0" style="margin-left: 25px">停用</el-radio>
        </el-form-item>
        <el-form-item>
          <el-button style="margin-left: 120px" @click="cancelBtn">取消</el-button>
          <el-button style="background-color: #05cd95; color: #fff" @click="BtnOK">确认</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<style lang="less" scoped>
.navTop {
  background-color: #fff;
  padding-bottom: 20px;
  .el-form-item {
    display: block;
    width: 80%;
    margin-left: 30px;
  }
}

.content {
  // padding: 0px 20px;
  .choice {
    height: 40px;
    .userButton {
      margin-left: 200px;
      margin-top: 33px;
    }
  }
  .body {
    background-color: #fff;
  }
  .choiceList {
    display: inline-block;
    margin-left: 50px;
    margin-top: 50px;
  }

  .feature {
    margin-top: 10px;
  }
}
.el-form-item {
  width: 80%;
  margin-left: 30px;
}
.el-input {
  margin-left: 25px;
}
.el-select {
  margin-left: 25px;
  width: 100%;
}

.el-date-picker {
  width: 50%;
}

::v-deep .el-form-item--large .el-form-item__content {
  width: 45%;
  margin-left: 25px;
}

.search {
  margin-top: 40px;
  margin-left: 120px;
}
.reset {
  margin-top: 40px;
  margin-left: 100px;
}
.add {
  background-color: #05cc95;
  margin-top: 20px;
  width: 100px;
  margin-left: 40px;
  margin-bottom: 20px;
  border: 1px solid #05cc95;
}
</style>
